<template>
	<view class="viewport">
		<view class="search" :style="{ background : bgColor, borderRadius: radius + 'px'}" @tap="searchClickAction">
			<view class="iconfont icon-search  search__icon"></view>
			<view class="">搜索</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "yg-searchbar",


		props: {
			//  背景颜色
			bgColor: {
				type: String,
				default () {
					return '#fff'
				}
			},
			//   圆角尺寸
			radius: {
				type: Number,
				default () {
					return 17
				}
			}
		},
		data() {
			return {

			};
		},

		methods: {
			//  点击搜索栏触发事件
			searchClickAction() {
				// 利用组件通信的子串父,将事件传给父组件
				this.$emit('searchClick');
			}
		},



	}
</script>

<style scoped lang="scss">
	.viewport {
		background: $uni-color-theme;
		padding: 20rpx;
	}

	.search {
		display: flex;
		justify-content: center;
		align-items: center;
		background: #fff;
		border-radius: 30rpx;
		height: 60rpx;
		color: #999;
		font-size: 30rpx;
	}

	.search__icon {
		font-size: 28rpx;
		margin-right: 10rpx;
	}
</style>